<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>列表过滤</title>
    <script src="../js/vue.js"></script>
</head>
<body>
<div id="root">
    <ul>
        <!--      渲染数组  :key最好赋值一个唯一的标识 -->
        <h1>列表过滤</h1>
        <input type="text" v-model="keyWord">
        <li v-for="(p,index) in filPersons" :key="index">
            <!--        第二个变量是索引-->
            {{p.name}}-{{p.age}}
        </li>
    </ul>
</div>
<script>
    Vue.config.productionTip = false;
    Vue.config.devtools = true;

    //用监视属性来写
    // new Vue({
    //     el: '#root',
    //     data: {
    //         //定义一个关键词
    //         keyWord: '',
    //         persons: [
    //             {id: '001', name: '周冬雨', age: 18},
    //             {id: '002', name: '马冬梅', age: 19},
    //             {id: '003', name: '周杰伦', age: 21},
    //             {id: '004', name: '温兆伦', age: 22}
    //         ],
    //         filPersons: []
    //     },
    //     watch: {
    //         //监视关键词
    //         keyWord: {
    //             immediate: true,
    //             handler(value) {
    //                 //由于初始值不能立马遍历 而且 '' 包含于任何字符串中 所以开启初始化
    //                 this.filPersons = this.persons.filter(item => {
    //                     return item.name.indexOf(value) !== -1;
    //                 })
    //             }
    //         }
    //     }
    // });

    //用计算属性来写
    new Vue({
            el: '#root',
            data: {
                //定义一个关键词
                keyWord: '',
                persons: [
                    {id: '001', name: '周冬雨', age: 18},
                    {id: '002', name: '马冬梅', age: 19},
                    {id: '003', name: '周杰伦', age: 21},
                    {id: '004', name: '温兆伦', age: 22}
                ]
            },
            computed: {
                filPersons() {
                    //初始化时会执行一次 计算 所以不懂担心 开始没数据的问题
                    //数组的过滤方法会返回一个过滤后的数据 然后在返回给计算属性
                    return this.persons.filter(item => {
                        // indexOf 判断字符串中是否含有该字符
                        return item.name.indexOf(this.keyWord) !== -1;
                    })
                }
            }
        }
    );


</script>
</body>
</html>